<!--此处是设计Index.vue组件实现App.vue的内容，避免发生在访问时出现嵌套的问题。-->
<template>
    <el-container style="height: 1000px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">   <!--此处是边栏设置-->
            <!--<el-menu :default-openeds="['1']" :default-active="'1-1'">
              <el-submenu index="1">    &lt;!&ndash;此处为可展开页面设置&ndash;&gt;
                <template slot="title"><i class="el-icon-message"></i>导航一</template>
                <el-menu-item-group>    &lt;!&ndash;此处为导航一的组内部件&ndash;&gt;
                  <el-menu-item index="1-1">选项1</el-menu-item>    &lt;!&ndash;不可分菜单部件&ndash;&gt;
                  <el-menu-item index="1-2">选项2</el-menu-item>

                  <el-submenu index="1-3">
                    <template slot="title"><i class="el-icon-message"></i>选项3</template>
                    <el-menu-item index="1-3-1">选项3-1</el-menu-item>
                    <el-menu-item index="1-3-2">选项3-2</el-menu-item>
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              &lt;!&ndash;<el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                <el-menu-item-group>
                  <template slot="title">分组一</template>
                  <el-menu-item index="2-1">选项1</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="2-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                </el-submenu>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                <el-menu-item-group>
                  <template slot="title">分组一</template>
                  <el-menu-item index="3-1">选项1</el-menu-item>
                  <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="3-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="3-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                </el-submenu>
              </el-submenu>&ndash;&gt;
            </el-menu>-->

            <el-menu router :default-openeds="['0']">   <!--实现菜单栏-->
                <!--此处实现从router中的routers对象的一级路由的取值与展示-->
                <el-submenu v-for="(item,index) in $router.options.routes" :index="index+'' " v-if="item.show">    <!--用于实现可多层的可展开菜单栏,且index为循环的序号-->
                    <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>

                    <!--此处获取一级路由下的二级路由children的信息展示-->
                    <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
                      :class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">  <!--此处是网页的内容头部页面-->
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px">执行操作</i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>     <!--此处是网页的内容展示页面-->
                <!--如果想把router链接过来的内容正确显示，需要放在此处-->

                <!--此处是经router路由跳转过来的信息展示-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>